@grid:grid;
@row:grid-row;
@col:grid-col;
.@{grid}{
  min-height: 100px;
  height: 100%;
  position: relative;
}
.@{grid}-item{
  pointer-events: none;
  position: absolute;
}
.grid-col(@n, @left, @i: 1) when (@i =< @n) {
  .@{grid}-x-@{i} {
    left: @left * @i * 1%;
  }
  .@{grid}-w-@{i} {
    width: @left * @i * 1%;
  }
  .grid-col(@n, @left, (@i + 1));
}
.grid-row(@n, @top, @i: 1) when (@i =< @n) {
  .@{grid}-y-@{i} {
    top: @top * @i * 1%;
  }
  .@{grid}-h-@{i} {
    height: @top * @i * 1%;
  }
  .grid-row(@n, @top, (@i + 1));
}
.grid-generate(@n, @i: 1) when (@i =< @n) {
  @item:100/@i;
  .@{col}-@{i}{
    .grid-col(@i, @item);
  }
  .@{row}-@{i}{
    .grid-row(@i, @item);
  }
  .grid-generate(@n, (@i + 1));
}
.grid-generate(26);
